import React, { Component } from 'react';
import { StyleSheet, DeviceEventEmitter, Text, View, Image, PixelRatio, Dimensions, TouchableOpacity, FlatList } from "react-native";
import { style } from '../../../../theme/style';
import { GLOBAL } from '../../../../config/global';
import { NewAccount } from '../../../../components/common/newAccount';
import { SlideSelect } from '../../../../components/common/slideSelect';
import StorageHelper from '../../../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../../../config/storage';

import moment from 'moment';

const scale = GLOBAL.SCALE;

export class ToolsTabComponent extends Component {
	constructor(props) {
		super(props)
		this.state = {
			alertShow: false,
			options: [],
			choice: ''
		};
	}

	async componentWillMount () {
		this.getSorage()
	}
	//获取业务组织
	async getSorage () {
		const userInfoJson = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
		const userInfo = JSON.parse(userInfoJson);
		console.log(userInfo.corpInfoTOs)
		this.setState({
			options: userInfo.corpInfoTOs || [],
			choice: this.state.choice.corpId ? this.state.choice : userInfo.corpInfoTOs[0]
		}, () => {
			this.props.changeChoice(this.state.choice)
		})
	}
	render () {
		let { alertShow, options, choice } = this.state;
		let { toolKey, curIndex, setTabIndex, setToolKey, menuData } = this.props;
		toolKey = toolKey || 'TOOLS';
		return (
			<View style={styles.toolsContainer}>
				<View style={{ flexDirection: 'row', alignItems: 'center' }}>
					{menuData['TOOLS'] ? <Text onPress={() => { setToolKey('TOOLS', choice) }} style={toolKey === 'TOOLS' ? styles.toolsTabsChecked : styles.toolsTabsUnchecked}>应用工具</Text> : null}
					{menuData['REPORT'] ? <View style={styles.line}></View> : null}
					{menuData['REPORT'] ? <Text onPress={() => { setToolKey('REPORT') }} style={toolKey === 'REPORT' ? styles.toolsTabsChecked : styles.toolsTabsUnchecked}>数据日报</Text> : null}
					{toolKey === 'REPORT' && options.length > 1 ?
						<NewAccount
							fn={(val) => { this.setState({ alertShow: val }) }}
							choice={choice.corpName || ''}
							accountStyles={{
								backgroundColor: '#e5e6ec',
								borderRadius: 10,
								height: 25,
								justifyContent: 'center',
								alignItems: 'center',
								paddingTop: 2,
								paddingRight: 5,
								paddingLeft: 5,
								width: 170,
								marginLeft: 15
							}}
							textColor={{
								color: '#adadb2',
								width: 140,
								fontSize: 12,
								textAlign: 'center'
							}}
							imgUrl={require('../../../../imgs/downAccount2.png')}
							imgStyle={{
								marginLeft: 0,
								tintColor: '#adadb2',
								width: 12,
								height: 12,
							}}
						/> : null}
				</View>
				{
					toolKey === 'REPORT' ? <View style={styles.tab}>
						{menuData[toolKey] ? menuData[toolKey].tabs.map((item, index) => {
							return <Text key={index} style={[styles.tabItem, curIndex == index ? styles.tabItemChecked : null]} onPress={() => { setTabIndex(index) }}>{item.value}</Text>
						}) : null}
					</View> : null
				}
				<SlideSelect
					alertShow={alertShow}
					options={options}
					select={(val) => {
						this.setState({ choice: val || options[0], alertShow: false }, () => {
							this.props.changeChoice(this.state.choice)
						})
					}}
					unselect={() => {
						this.setState({ alertShow: false })
					}} />
			</View>
		)
	}
}

const styles = StyleSheet.create({
	toolsContainer: {
		padding: 12 * scale,
		//borderBottomWidth: 1 * scale,
		//borderBottomColor: '#D8D8D8'
	},
	toolsTabsView: {
		flex: 1,
		flexDirection: 'row',
	},
	toolsTabsChecked: {
		color: style.color.themeColor,
		fontSize: 16 * scale,
		fontWeight: '600',
		//marginRight: 20 * scale
	},
	toolsTabsUnchecked: {
		color: '#031B31',
		fontSize: 16 * scale,
		fontWeight: '600',
		//marginRight: 20 * scale
	},
	toolsExcButtonView: {
		flexDirection: 'column',
		alignItems: 'center'
	},
	toolsExcButton: {
		color: '#031B31',
		fontSize: 10 * scale,
		fontWeight: '800'
	},
	tab: {
		flex: 1,
		flexDirection: 'row',
		marginTop: 20 * scale
	},
	tabItem: {
		width: 80 * scale,
		height: 30 * scale,
		backgroundColor: '#eee',
		textAlign: 'center',
		lineHeight: 30 * scale,
		borderRadius: 15 * scale,
		overflow: 'hidden',
		marginRight: 20 * scale,
		color: '#9C9D9D'
	},
	tabItemChecked: {
		color: '#2A86ED',
		backgroundColor: '#D4E5F7'
	},
	tabTime: {
		color: '#aaa',
		paddingLeft: 8 * scale,
		fontSize: 12 * scale,
		paddingTop: 5 * scale
	},
	line: {
		width: 2 * scale,
		height: 18 * scale,
		backgroundColor: '#bbb',
		marginLeft: 13 * scale,
		marginRight: 13 * scale
	}
})